<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity" :events="marker.events" :key="marker.id"> 
      </el-amap-circle-marker>
    </el-amap>
    <!-- 按钮 -->
    <div class="yj-btn">
      <div class="equip-btn">
        <button @click="dialog_4=true"><i class="iconfont icon-gaojing"></i>设备状态告警<span>{{warnnum}}</span></button>
        <button @click="dialog_4=true"><i class="iconfont icon-gaojing"></i>设备业务告警<span>{{warnnum}}</span></button>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <div class="dialog-wrap">
      <el-dialog title="设备状态告警" :visible.sync="dialog_4" width="70%">
        <el-table :data="tableData1" size="mini" stripe style="width: 100%">
          <el-table-column type="index" width="50" />
          <el-table-column prop="name" label="设备名称"/>
          <el-table-column prop="id" label="设备编号"/>
          <el-table-column prop="hd" label="所属河段"/>
          <el-table-column prop="hc" label="河长"/>
          <el-table-column prop="lx" label="设备类型"/>
          <el-table-column prop="gj" label="告警类型"/>
          <el-table-column prop="time" label="告警时间"/>
          <el-table-column label="定位" width="50">
            <template slot-scope="scope">
              <i class="el-icon-location-outline"></i>
            </template> 
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        zoom: 13,
        center: [106.55,29.57],
        plugin: ['ToolBar','Scale',{
            pName: 'MapType',
            defaultType: 1,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }],
        markers: [{
          id:1,
          center: [106.55,29.57],
          radius: 20,
          fillOpacity: 1,
          fillColor: 'rgba(0,0,255,1)',
          events: {
            click: () => {
              //alert('click');
              //this.equVisibile=true
            }
          }
        }],      
        // 弹窗信息
        dialog_4:false, 
        tableData1:[
        {
          name:'1号水质监测',
          id:'12112',
          hd:'嘉陵江',
          hc:'张三',
          lx:'水质监测',
          gj:'信号丢失',
          time:'2018/2/1 12:00:00'
        },
        {
          name:'1号水质监测',
          id:'12112',
          hd:'嘉陵江',
          hc:'张三',
          lx:'水质监测',
          gj:'信号丢失',
          time:'2018/2/1 12:00:00'
        }
      ],
      }
    },
    methods:{

    }
  };
</script>
<style>
.amap-page-container {
  height:100%;
}
</style>
